<script lang="ts" setup>
import { ref } from "vue"

const dataList = ref<any[]>([
    {
        roleName: '超级管理员',
        appName: '小蓝科创',
        status: true,
        description: "--"
    },
    {
        roleName: '商家管理员',
        appName: '小蓝科创',
        status: false,
        description: "--"
    },
    {
        roleName: '商品管理员',
        appName: '小蓝科创',
        status: false,
        description: "--"
    },
])

const modalVisible = ref(false)
const formAction = ref('')

const handleAction = (action: string) => {
    if (action === 'add') {
        modalVisible.value = true
        formAction.value = 'add'
    }
};
</script>

<template>
    <umrp-container :gap="16" padding="16px" bg-color="#f2f2f2" height="100%">
        <umrp-breadcrumb :items="['用户管理', '用户角色']"></umrp-breadcrumb>
        <umrp-search-card>
            <umrp-row :gutter="12">
                <umrp-col :span="8">
                    <umrp-form-item label="应用模块">
                        <umrp-select>
                            <umrp-option value="xbluecard">小蓝科创</umrp-option>
                        </umrp-select>
                    </umrp-form-item>
                </umrp-col>
                <umrp-col :span="8">
                    <umrp-form-item label="角色名称">
                        <umrp-input placeholder="请输入角色名称"></umrp-input>
                    </umrp-form-item>
                </umrp-col>
                <umrp-col :span="8">
                    <umrp-form-item label="状态">
                        <umrp-select default-value="1">
                            <umrp-option value="1">全部</umrp-option>
                            <umrp-option value="2">启用</umrp-option>
                            <umrp-option value="3">禁用</umrp-option>
                        </umrp-select>
                    </umrp-form-item>
                </umrp-col>
            </umrp-row>
        </umrp-search-card>
        <umrp-card :border="false">
            <umrp-table :action-bar="true" :data="dataList" @action="handleAction">
                <template #columns>
                    <umrp-table-column title="序号" data-index="id" :width="120"></umrp-table-column>
                    <umrp-table-column title="应用模块" data-index="appName" :width="200"></umrp-table-column>
                    <umrp-table-column title="角色名称" data-index="roleName" :width="200"></umrp-table-column>
                    <umrp-table-column title="角色描述" data-index="description"></umrp-table-column>
                    <umrp-table-column title="操作" slot-name="action" :width="120"></umrp-table-column>
                </template>
                <template #action>
                    <umrp-space :size="10">
                        <umrp-button type="primary" @click="modalVisible = true">编辑</umrp-button>
                        <umrp-popconfirm message="您确认删除么？">
                            <umrp-button type="danger">删除</umrp-button>
                        </umrp-popconfirm>
                    </umrp-space>
                </template>
            </umrp-table>
        </umrp-card>
        <umrp-modal :width="500" v-model:visible="modalVisible">
            <umrp-form>
                <umrp-form-item label="应用模块" :required="true">
                    <umrp-select>
                        <umrp-option value="xbluecard">小蓝科创</umrp-option>
                    </umrp-select>
                </umrp-form-item>
                <umrp-form-item label="角色名称" :required="true">
                    <umrp-input placeholder="请输入角色名称"></umrp-input>
                </umrp-form-item>
                <umrp-form-item label="角色描述">
                    <umrp-textarea placeholder="请输入角色描述"></umrp-textarea>
                </umrp-form-item>
            </umrp-form>
        </umrp-modal>
    </umrp-container>
</template>